<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
        <!-- 添加角色按钮区域 -->
        <el-row>
            <el-col>
                <el-button>添加角色</el-button>
            </el-col>
        </el-row>

        <!-- 角色列表区域 -->
        <el-table>

        </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // 所有角色列表数据
            roleList: []
        }
    },
    created() {
        // 获取所有角色列表数据
        this.getRoleList()
    },
    methods: {
        // 获取所有角色列表数据
        async getRoleList() {
            const {data : res} = await this.$http.get('roles')
            if (res.meta.status !== 200) return this.$message.error("获取角色列表数据失败");
            this.roleList = res.data
        }
    }
}
</script>

<style lang="less" scoped>
</style>